<kb-form
  simple
  ref="validationForm"
  :model="model"
  :rules="rules"
  class="panel panel-default panel-small"
  :error-visible="errorVisible"
>
  <template v-for="(item,index) in model.validations">
    <div class="panel-heading">
      <a
        @click="remove(index)"
        class="btn btn-xs dark pull-right"
        href="javascript:;"
        v-kb-tooltip:left="Kooboo.text.common.remove"
      >
        <i class="fa fa-minus"></i>
      </a>
      <h4 class="panel-title">{{ Kooboo.text.validationRule[item.type] }}</h4>
    </div>
    <div class="panel-body">
      <kb-form-item
        v-if="types.indexOf(item.type) > -1"
        :prop="'validations[' + index + '].'+ item.type"
        v-slot="error"
        class="form-group"
        :id="'validation-error-container-' + fieldIndex + index"
      >
        <div
          :class="{'has-error': !!error.error }"
          v-kb-tooltip:left.manual.error="error.error"
          :data-container="'#validation-message-container-' + fieldIndex + index"
        >
          <input
            v-if="item.type == 'min'"
            type="number"
            v-model.number="item.min"
            class="form-control"
            :placeholder="Kooboo.text.validate.minimalValue"
          />
          <input
            v-else-if="item.type == 'max'"
            type="number"
            v-model.number="item.max"
            class="form-control"
            :placeholder="Kooboo.text.validate.maximumValue"
          />
          <input
            v-else-if="item.type == 'minChecked'"
            type="number"
            v-model.number="item.minChecked"
            class="form-control"
            :placeholder="Kooboo.text.validate.minimalChecked"
          />
          <input
            v-else-if="item.type == 'maxChecked'"
            type="number"
            v-model.number="item.maxChecked"
            class="form-control"
            :placeholder="Kooboo.text.validate.maximumChecked"
          />
          <input
            v-else-if="item.type == 'minLength'"
            type="number"
            v-model.number="item.minLength"
            class="form-control"
            :placeholder="Kooboo.text.validate.minimalLength"
          />
          <input
            v-else-if="item.type == 'maxLength'"
            type="number"
            v-model.number="item.maxLength"
            class="form-control"
            :placeholder="Kooboo.text.validate.maximumLength"
          />
          <input
            v-else-if="item.type == 'regex'"
            type="text"
            v-model="item.regex"
            class="form-control"
            :placeholder="Kooboo.text.validate.pattern"
          />
        </div>
      </kb-form-item>
      <kb-form-item
        :prop="'validations[' + index + '].message'"
        v-slot="error"
        class="form-group"
      >
        <div
          :class="{'has-error': !!error.error }"
          :id="'validation-message-container-' + fieldIndex + index"
        >
          <span class="form-control-static"
            >{{ Kooboo.text.component.fieldEditor.errorMsgHint }}</span
          >
          <input
            type="text"
            :placeholder="Kooboo.text.component.fieldEditor.errorMsg"
            v-model="item.message"
            class="form-control"
            v-kb-tooltip:left.manual.error="error.error"
            :data-container="'#validation-message-container-' + fieldIndex + index"
          />
        </div>
      </kb-form-item>
    </div>
  </template>
</kb-form>
